<template>
  <div class="wrapper">
    <div class="w_top" @click="openDatepicker">
      <i style="font-size: 18rem; color: white" class="iconfont lricon-tianjia"></i>
    </div>
    <div class="w_bot">
      <div v-for="(item, index) in nianMings" class="niangming_item">
        <div class="nm_item_l">
          <div class="top">
            <div class="t_i">
              <div class="tit">姓名:</div>
              <div class="val"><input :class="{ s_l: item.name.length >= 3 }" class="input_name" type="text"
                  v-model="item.name" name="" id=""></div>
            </div>
            <div class="t_i">
              <div class="tit">性别:</div>
              <div @click="updateGender(index)" class="val">{{ item.gender }}</div>
            </div>
            <div class="t_i">
              <div class="tit">生日:</div>
              <div @click="updateBirth(index)" class="val">
                {{
                  item.birth.year +
                  "/" +
                  item.birth.month +
                  "/" +
                  item.birth.day
                }}
              </div>
            </div>
          </div>
          <div class="bot">
            <div class="t_i">
              <div class="tit">本命:</div>
              <div class="val">
                {{
                  calculateBenmingXingnian(
                    item.birth.year,
                    item.birth.month,
                    item.birth.day,
                    item.gender,
                    qkDate
                  ).benMing
                }}
              </div>
            </div>
            <div class="t_i">
              <div class="tit">年龄</div>
              <div class="val">
                {{
                  calculateBenmingXingnian(
                    item.birth.year,
                    item.birth.month,
                    item.birth.day,
                    item.gender,
                    qkDate
                  ).age
                }}
              </div>
            </div>
            <div class="t_i">
              <div class="tit">本命:</div>
              <div class="val">
                {{
                  calculateBenmingXingnian(
                    item.birth.year,
                    item.birth.month,
                    item.birth.day,
                    item.gender,
                    qkDate
                  ).xingNian
                }}
              </div>
            </div>
          </div>
        </div>
        <div @click="deleteNinaming(index)" class="nm_item_r">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Highlight } from "vant";
import emitter from "../../bus/emitter";
import {
  calculateAgeRanges,
  calculateBenmingXingnian,
} from "../../api/nianming";
import { getDateBySj, getYmdHmsByDate, strArrToNumberDate } from "../../api/qikeDateOption";
export default {
  name: "Test",
  async created() {
    this.qkDate = getDateBySj(this.qkdt);
    emitter.on("ppAddniangming", (v) => {
      let b = strArrToNumberDate(v);
      if (this.slcIndex === -1) {
        // 添加新项
        this.nianMings = [...this.nianMings, {
          gender: "男",
          name: "李明",
          birth: b
        }];
      } else {
        // 更新已有项
        const newArr = [...this.nianMings];
        newArr[this.slcIndex].birth = b;
        this.nianMings = newArr;
      }
      this.slcIndex = -1;
    });
  },
  components: {
    Highlight,
  },
  data() {
    return {
      slcIndex: -1,
      calculateBenmingXingnian: calculateBenmingXingnian,
      qkDate: null
    };
  },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    // 2. 新增的qkdt字符串props
    qkdt: {
      type: String,
      default: '' // 默认空字符串
    },
    nmModelValue: {
      type: Object,
      default: () => ({
        xn: '暂无',
        bm: '暂无'
      })
    },
  },
  emits: ['update:modelValue', 'update:nmModelValue'],
  methods: {
    openDatepicker() {
      emitter.emit("ppOpendatepicker", true);
    },
    slcNianming(index) {
      this.slcIndex = index;
    },
    updateGender(index) {
      const newArr = [...this.nianMings];
      newArr[index].gender = newArr[index].gender === "男" ? "女" : "男";
      this.nianMings = newArr;
    },
    updateBirth(index) {
      this.slcIndex = index;
      this.openDatepicker();
    },
    deleteNinaming(index) {
      const newArr = [...this.nianMings];
      newArr.splice(index, 1);
      this.nianMings = newArr;
    }
  },
  watch: {
    nianMings(n, o) {
      if (this.nianMings.length === 0) return; // 空数组直接返回
      const firstItem = this.nianMings[0];
      // 补充对birth属性的安全判断（避免birth为undefined）
      if (!firstItem.birth) return;

      const nm = calculateBenmingXingnian(
        firstItem.birth.year,  // 注意：原代码写的是b.year，实际应为b.birth.year
        firstItem.birth.month,
        firstItem.birth.day,
        firstItem.gender,
        this.qkDate
      );
      this.titNm.xn = nm.xingNian;
      this.titNm.bm = nm.benMing;
    },
    qkdt(n, o) {
      this.qkDate = getDateBySj(n)
    }
  },
  computed: {
    nianMings: {
      get() {
        return this.modelValue;
      },
      set(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    },
    titNm: {
      get() {
        // 从props获取车对象数据
        return this.nmModelValue;
      },
      set(newVal) {
        // 触发事件通知父组件更新车对象
        this.$emit('update:nmModelValue', newVal);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$lcbgc: var(--lr_lcbgc);

.wrapper {
  max-width: 96vw;
  height: calc(100vh - 135rem - var(--safe-top));
  border-radius: 4rem;
  overflow: hidden;
  margin-left: 2vw;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;

  .w_bot {
    display: flex;
    flex-direction: column;

    .niangming_item {
      padding-top: 3rem;
      padding-bottom: 3rem;
      margin-top: 10rem;
      height: 60rem;
      border: 1.5rem solid var(--cart_bg_color);
      display: flex;
      border-radius: 6rem;
      justify-content: space-between;
      align-items: center;

      .nm_item_r {
        width: 30rem;
        height: 50rem;
        font-size: 16rem;
        line-height: 30rem;
        text-align: center;
        border-radius: 3rem;
        margin-right: 5rem;
        writing-mode: vertical-rl;
        color: #fff;
        background-color: var(--cart_bg_color);
      }

      .nm_item_l {
        margin-left: 5rem;
        margin-right: 5rem;
        font-size: 15px;
        flex-grow: 1;
        width: calc(92vw - 45rem);
        height: 60rem;
        display: flex;
        flex-direction: column;

        .top {
          width: 100%;
          height: 30rem;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .t_i {
            display: flex;
            width: fit-content;
            height: 22rem;
            border-radius: 3rem;
            border: 1.5rem solid var(--cart_bg_color);

            div {
              height: 22rem;
              line-height: 22rem;
              padding-left: 3rem;
              padding-right: 3rem;
              text-align: center;
              width: fit-content;
            }

            .tit {
              color: #fff;
              background-color: var(--cart_bg_color);
            }

            .val {
              display: flex;
              justify-content: center;
              align-items: center;

              .input_name {
                padding: 0;
                list-style: none;
                width: auto;
                border: none;
                outline: none;
                height: 20rem;
                width: 30rem;
                // max-width: 45rem;
              }

              .s_l {
                width: 45rem !important;
              }
            }
          }
        }

        .bot {
          width: 100%;
          height: 30rem;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .t_i {
            display: flex;
            width: fit-content;
            height: 22rem;
            border-radius: 3rem;
            border: 1.5rem solid var(--cart_bg_color);

            div {
              height: 22rem;
              line-height: 22rem;
              padding-left: 3rem;
              padding-right: 3rem;
              text-align: center;
              width: fit-content;
            }

            .tit {
              color: #fff;
              background-color: var(--cart_bg_color);
            }
          }
        }
      }
    }
  }

  .w_top {
    height: 30rem;
    width: 92vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10rem;
    background-color: var(--cart_bg_color);
    // border: 1.5rem solid var(--cart_bg_color);
    border-radius: 8rem;
  }
}
</style>
